<template>
  <div>
    <div class="orderdetails-state">
      <dl @click="toLogisticePage(orderDetailver.order_no)">
        <dt><i class="iconfont icon-dingdan"></i></dt>
        <dd id="order-state">
          <h2>订单状态：<font>{{orderDetailver.status_text}}</font>
          </h2>
          <h3 class="gray6" v-if="orderDetailver.order_status == 1 && !statusFalg">请在
            <font class="red45">
              <timeDown :endTime="orderDetailver.expire_time" :Dtime="Dtime" @timeEnd="handertimeEnd"></timeDown>
            </font>
            内完成交易支付
          </h3>
          <h3 v-else>
            <p class="gray6">{{orderTrace.context}}</p>
            <p>{{orderTrace.time}}</p>
          </h3>
        </dd>
        <i class="iconfont icon-xiayige"
           v-show="orderDetailver.order_status !== 1 && orderDetailver.order_status !== -3"></i>
      </dl>
    </div>

    <div class="orderdetails-state">
      <dl>
        <dt><i class="iconfont icon-dizhi"></i></dt>
        <dd id="order-address">
          <h2>收货人：{{orderDetailver.consignee}}<span class="fr">{{orderDetailver.consignee_telephone}}</span></h2>
          <h3>{{orderDetailver.consignee_address}}</h3>
        </dd>
      </dl>
      <p class="remark" v-show="orderDetailver.remark">
        <font>买家留言：<span>{{orderDetailver.remark}}</span></font>
      </p>
    </div>

    <div class="order-list-box">
      <div class="orderList">
        <div class="order-list">
          <dl v-for="(product,index) in orderDetailver.products" :key="index"
              :class="{'gray': product.order_product_status == 3}">
            <dt><img
              :src="product.product_cover + '?x-oss-process=image/resize,m_pad,h_400,w_400,color_ffffff/quality,Q_80/format,jpg'">
              <font v-if="product.order_product_status == 3">已退款</font>
            </dt>
            <dd>
              <h2>{{product.designer_name}}</h2>
              <p>{{product.product_name}}</p>
              <p class="gray">尺码 ：{{product.size}}</p>
            </dd>
            <h3>{{product.currency_logo}}{{product.show_price}}<font>x{{product.product_qty}}</font>
            </h3>
          </dl>
        </div>
        <div class="order-list-di">
          <div class="distri">配送说明
            <span>{{orderDetailver.shipping_title}}
              <font v-for="(str,i) in shippingDescription" :key="i">{{str}}</font>
            </span>
          </div>

          <ul>
            <li>商品金额 <span>
                <font>¥{{orderPrices.productAmount}}</font>
                <font
                  style="margin-left:5px">({{orderPrices.currency_logo}}{{orderPrices.totalCurrencyShowPrice}})</font>
              </span></li>
            <li>汇率 <span>{{orderPrices.exchangeRate}}</span></li>
            <li>运费 <span>
                <font>¥{{orderPrices.deliveryFee}}</font>
                <font v-if="orderPrices.totalCurrencyFreight != 0">({{orderPrices.currency_logo}}{{orderPrices.totalCurrencyFreight}})</font>
              </span></li>
            <li v-if="orderPrices.codeDiscountAmount != 0">优惠码 <span>- ¥ {{orderPrices.codeDiscountAmount}}</span></li>
            <li v-if="orderPrices.couponAmount != 0">优惠券 <span>- ¥ {{orderPrices.couponAmount}}</span></li>
            <li class="diTotal">应付总额 <span>
                <font>¥{{orderPrices.amoutPayable}}</font>
              </span></li>
          </ul>
        </div>

        <div class="order-list-num">
          <p>订单编号：{{orderDetailver.order_no}}</p>
          <p>下单时间：<font>{{submitTime}}</font>
          </p>
          <span class="copyBtn" @click="copyTBL">复制</span>
        </div>
      </div>

      <div class="orderde-btn">
        <span v-if="orderDetailver.order_status == 1 || orderDetailver.order_status == 21">
          <font class="bgf0" @click="payBtn(orderDetailver.order_no)">去支付</font>
          <font @click="cancelOrderBtn(orderDetailver.order_no)">取消订单</font>
        </span>

        <span
          v-else-if="orderDetailver.order_status == 6 || orderDetailver.order_status == 5 || orderDetailver.order_status == -1 || orderDetailver.order_status == -3">
          <font class="bgf0" @click="againBuyBtn(orderDetailver.products)">再次购买</font>
        </span>

        <span v-else-if="orderDetailver.order_status == 4">
          <font class="bgf0" @click="receivedBtn(orderDetailver.order_no)">确认收货</font>
        </span>

        <span
          v-else-if="orderDetailver.order_status == 4 || orderDetailver.order_status == 5 || orderDetailver.order_status == 6 || orderDetailver.order_status == 33">
          <font class="bgf0">订单跟踪</font>
        </span>
      </div>
    </div>
    <placeholder :show.sync="isPageEmpty" :message.sync="emptyMsg" :hidBtn="hidBtn" @tryAgain="onTap" :styleTop="0"/>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'
  import wxpayfn from '@/utils/paymaneger'
  import timeDown from '@/components/timeDown'
  import {formatTime, timeQuantum} from '@/utils/index'
  import placeholder from '@/components/placeholder'

  export default {
    data() {
      return {
        statusText: '',
        orderDetailver: [],
        orderPrices: [],
        orderTrace: [],
        endTime: '',
        statusFalg: false,
        submitTime: '',
        shippingDescription: [],
        Dtime: 0,
        isPageEmpty: false,
        hidBtn: false,
        emptyMsg: '',
      }
    },
    onLoad() {
      this.$wx.setTitleBarTitle('订单详情');
      this.getdata()
    },
    onShow() {

    },
    computed: {
      ...mapState('cart', ['settleData'])
    },
    methods: {
      ...mapActions('cart', ['checkSettle']),
      //去支付
      onTap() {
        this.getdata()
      },
      payBtn(orderNo) {
        wxpayfn.pay(orderNo, data => {
          if (data) {
            this.$wx.showShortToast('支付成功')
            this.$root.$eventHub.$emit('requestPayBack', '')
            this.getdata(true)
          } else {
            this.$wx.showShortToast('支付失败')
            this.$root.$eventHub.$emit('requestPayBack', '')
            this.getdata(true)
          }
        })
      },
      //取消订单
      cancelOrderBtn(orderNo) {
        const self = this
        wx.showModal({
          title: '提示',
          content: '确认取消订单吗?',
          success(res) {
            self.cancelOrder(res, orderNo)
          }
        })
      },
      async cancelOrder(res, orderNo) {
        if (res.confirm) {
          const data = await this.$fly.post(this.$url.URL_CANCEORDER, {
            order_no: orderNo
          })
          if (data.successCode === 1) {
            this.getdata(true)
            this.$root.$eventHub.$emit('requestPayBack', '')  //更新订单列表
          }
        }
      },
      //再次购买
      againBuyBtn(products) {
        this.productObjArr = []
        products.forEach(item => {
          let productItem = {
            product_id: item.product_id.toString(),
            product_sku_id: item.product_sku_id.toString(),
            product_qty: item.product_qty.toString()
          }
          this.productObjArr.push(productItem)
        })
        this.againBuy()
      },
      async againBuy() {
        const data = await this.$fly.post(this.$url.URL_ADDBATCH, {
          product_sku_ids: this.productObjArr
        })
        if (data.successCode) {
          await this.checkSettle({
            isSettlePage: false,
            checkedProduct: this.productObjArr
          })
          if (this.settleData) {
            this.$wx.jumper('/pages/cashier/main')
          } else {
            this.$wx.showShortToast(this.errorMsg)
          }
        }
      },
      //确定收货
      async receivedBtn(orderNo) {
        const data = await this.$fly.post(this.$url.URL_RECEIVEORDER, {
          order_no: orderNo
        })
        if (data.successCode) {
          this.getdata(true)
        }
      },
      async getdata() {
        const data = await this.$fly.post(this.$url.URL_DETAILVER, {
          order_no: this.$root.$mp.query.orderNo
        })
        if (data.successCode === 1) {
          if (this.$wx.isArrayEmpty(data.data) || this.$wx.isArrayEmpty(data.data.order_detail)) {
            this.isPageEmpty = true
            this.hidBtn = true
            this.emptyMsg = '订单不存在'
          } else {
            this.orderDetailver = data.data.order_detail
            this.orderPrices = this.orderDetailver.prices
            this.orderTrace = this.orderDetailver.order_trace
            this.statusText = this.orderDetailver.status_text
            this.submitTime = formatTime(new Date(this.orderDetailver.submit_time));
            this.shippingDescription = this.orderDetailver.shipping_description.split('\\n');
            this.Dtime = timeQuantum(data.timestamp)
            this.isPageEmpty = false
          }
        } else {
          this.$wx.showShortToast(data.message)
          this.isPageEmpty = true
          this.hidBtn = false
          this.emptyMsg = data.message
        }
      },
      handertimeEnd() {
        // this.getdata(true)
        this.orderDetailver.status_text = '已取消';
        this.statusFalg = true;
        this.orderDetailver.order_status = -3
      },
      toLogisticePage(orderNo) {
        if (
          this.orderDetailver.order_status == 1 ||
          this.orderDetailver.order_status == -3
        )
          return
        this.$wx.jumper('/pages/logistics/main?orderNo=' + orderNo)
      },
      copyTBL: function (e) {
        var self = this
        wx.setClipboardData({
          data: self.orderDetailver.order_no,
          success: function (res) {
            self.$wx.showLongToast('复制成功')
          }
        })
      }
    },
    mounted() {
    },
    components: {
      timeDown,
      placeholder
    }
  }
</script>

<style scoped>
</style>
